<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <!-- 输入内容 -->
    <input type="text" placeholder="请输入你的内容">
    <!-- 发送请求 -->
    <button>发送</button>
    <!-- 显示结果 -->
    <div></div>

    <script>
        // 演示在浏览器端如何使用websocket
        // H5已经直接提供了websocket的API，可以直接使用

        const TYPE_ENTER = 0
        const TYPE_LEAVE = 1
        const TYPE_MSG = 2

        // document.querySelector("xxx")获取文档中 xxx 的元素：
        var input = document.querySelector("input")
        var button = document.querySelector("button")
        var div = document.querySelector("div")
        
        // 1、创建 websocket 对象
        // 参数1：websocket的服务地址,不同的服务地址有不同的功能，此处的功能是给服务器发啥数据就传回啥数据
        var socket = new WebSocket("ws://localhost:3000")

        // 2、open：当和 websocket 服务连接成功时触发
        socket.addEventListener("open", function(){
            // 连接成功时，给div加这一段内容
            div.innerHTML = "您已加入当前聊天室"
        })

        // 3、通过点击btn，主动给 websocket 服务发送消息
        button.addEventListener("click", function(){
            // 输入的内容传给 value
            var value = input.value
            socket.send(value)
            // 每次发送完消息，把输入框清空
            input.value = ""
        })


        // 4、有消息过来时，接收 websocket 服务的数据
        socket.addEventListener("message", function(e){
            // 后台将对象转换为字符串，才能广播，然后由前端将字符串转回对象
            var data = JSON.parse(e.data)
            var dv = document.createElement("div")
            
            if(data.type === TYPE_ENTER){
                dv.innerHTML = data.msg + "-----" +data.time
                dv.style.color = 'green'
            }else if(data.type === TYPE_LEAVE){
                dv.innerHTML = data.msg + "-----" +data.time
                dv.style.color = 'red'
            }else{
                dv.innerHTML = data.msg + "&nbsp;&nbsp;&nbsp;&nbsp;" +data.time
                dv.style.color = 'black'
            }
            div.appendChild(dv)
        })
    </script>
</body>
</html>